<template>
  <div>
    <Btn title="我是传递过来的标题" @on-emit-click="getBtn">
      <template #default>default</template>
      <template #footer>footer</template>
    </Btn>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
type Prop = {
  title: string
}

const Btn = (props: Prop, ctx: any) => {
  return h(
    'div',
    {
      style: {
        background: 'red',
        width: '200px',
        height: '100px',
        display: 'flex',
        'flex-direction': 'column',
        'align-items': 'center',
        'justify-content': 'center',
      },
      onClick: () => {
        ctx.emit('on-emit-click', '哈哈哈哈')
      }
    },
    [
      props?.title,
      h(
        'div',
        {
          style: {
            color: 'blue'
          },
        },
        ctx.slots.default(),
      ),
      h(
        'div',
        {
          style: {
            color: 'green'
          },
        },
        ctx.slots.footer(),
      ),
    ],
  )
}
const getBtn = (str: string) => {
  console.log(str)
}
</script>

<style scoped>

</style>